<template>
  <app-page>
    <div class="home_index">
      <div class="home_type">
        <HomeType />
      </div>
      <div class="home_comtemt">
        <LeagueMatch />
        <MatchList v-if="!homestore.state.matchDetail.show" />
        <MatchDetail v-if="homestore.state.matchDetail.show" />
        <Order />
      </div>
    </div>

    <OrderDialog v-if="dialogstore.state.dialogArr.length > 0" />
    <OrderConfirm v-model="dialogstore.state.orderConfirm.show" />
  </app-page>
</template>

<script setup>
import HomeType from "./HomeType.vue";
import LeagueMatch from './LeagueMatch.vue'
import MatchList from './MatchList.vue'
import MatchDetail from './MatchDetail.vue'
import Order from './Order.vue'

import OrderDialog from './OrderDialog.vue'
import OrderConfirm from './OrderConfirm.vue'
import WS from '@/utils/ws.js'
import { useHomeStore } from './home-store.js'
import { useDialogStore } from './dialog-store.js'

const homestore = useHomeStore()
const dialogstore = useDialogStore()

provide('HomeStore', {
  homeStore: homestore,
  homeState: homestore.state,
})
provide('DialogStore', {
  dialogStore: dialogstore,
  dialogState: dialogstore.state,
})

const ws = new WS({
  url: `ws://api.qubit-dance.com:9996/sp/order_task_data_statistics/`,
  onMessage(data) {
    
    homestore.state.order.data = data.data
    homestore.getorderdata()
    // if (data.level != undefined) {
    //   if (data.level !== 4) {
    //     audio.src = 'http://api.qubit-dance.com:7080/sound/s3.mp3'
    //     audio.play()
    //   } else {
    //     audio.src = 'http://api.qubit-dance.com:7080/sound/s1.mp3'
    //     audio.play()
    //   }
    //   ElNotification({
    //     title: '提示',
    //     message: data.message,
    //     type: {
    //       1: 'warning',
    //       2: 'warning',
    //       3: 'warning',
    //       4: 'success',
    //     }[data.level],
    //     onClick() {
    //       goMessage()
    //     },
    //   })
    // }
  },
})

onUnmounted(() => {
  ws.close()
})
</script>

<style lang="scss" scoped>
.home_index {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;

  .home_type{
    width: 100%;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.3);
    margin-bottom: 12px;
  }

  .home_comtemt{
    width: 100%;
    height: calc( 100% - 44px );
    display: flex;
  }
}
</style>

<style>
.width_52 {
  width: 52px;
  text-align: center;
}
.margin_right_4 {
  margin-right: 4px;
}
.margin_top_4 {
  margin-top: 4px;
}
.width_20 {
  width: 20px;
  margin: 0 20px;
}
.flex_column {
  display: flex;
  flex-direction: column;
}
.flex {
  display: flex;
}
.width_164 {
  width: 164px;
}
.width_60 {
  width: 60px;
}
.width_108 {
  width: 108px;
}
</style>
